<template>
  <div class="main-center bg">
    <!-- 顶部头像设置 -->
    <div class="mian-top bg">
      <div style="padding: 10px 15px 0 15px; text-align: right;" @click="install">
        <van-icon name="setting-o" color="white" size="25px" />
      </div>
      <div style="margin: 0 0 10px; text-align: center; height: 55px;">
        <div><img :src="src" alt="" style="border-radius:50%;"></div>
      </div>
      <div style="padding: 5px 15px 0 15px; text-align: center; color: white;">
        {{ list }}
      </div>
    </div>
    <!-- 我的订单 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable van bg">
      <div class="van-cell__title"><span data-v-71bccc70="">我的订单</span></div>
      <div class="van-cell__value"><a class="text-desc" style="color: gray; font-size: 12px;">全部订单</a></div><i
        data-v-71bccc70="" class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>
    <div class="deler bg">
      <span v-show="show"
        style="position: absolute; z-index: 999; left: 65px; font-size: 14px; height: 18px; color: white; width: 18px; text-align: center; border-radius: 50%; background-color: red;">{{
          idocu }}</span>
      <div v-for="(item, index) in itemname" :key="index" @click="tack(index)">
        <p><van-icon :name="item.icon" size="28px" color="gray" /></p>
        <p style="font-size: 12px;">{{ item.name }}</p>
      </div>
    </div>
    <!-- 我的优惠卷 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable van bg">
      <div class="van-cell__title"><span data-v-71bccc70="">我的优惠卷</span></div>
      <div class="van-cell__value"><a data-v-71bccc70="" href="#/user/order/list/0" class="text-desc"
          style="color: gray; font-size: 12px;">全部优惠卷</a></div><i data-v-71bccc70=""
        class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>
    <div class="deler bg">
      <div v-for="(item, index) in youname" :key="index" @click="nikename(index)">
        <p><van-icon :name="item.icon" size="28px" color="gray" /></p>
        <p style="font-size: 12px;">{{ item.name }}</p>
      </div>
    </div>
    <!-- 我的收藏 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable bg" style="margin-top: 10px;"><van-icon
        name="star-o" style="margin-top: 5px;" />
      <div class="van-cell__title"><span> &nbsp;我的收藏</span></div><i
        class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>
    <!-- 收货地址 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable bg" @click="sgou"><van-icon name="location-o"
        style="margin-top: 5px;" />
      <div class="van-cell__title"><span> &nbsp;收货地址</span></div><i
        class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>
    <!-- 服务中心 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable bg"><van-icon name="smile-o"
        style="margin-top: 5px;" />
      <div class="van-cell__title"><span> &nbsp;服务中心</span></div><i
        class="van-icon van-icon-arrow van-cell__right-icon"><!----></i>
    </div>
    <!-- 深色模式 -->
    <div role="button" tabindex="0" class="van-cell van-cell--clickable bg"><van-icon name="photo-o"
        style="margin-top: 5px;" />
      <div class="van-cell__title"><span> &nbsp;深色模式</span></div><van-switch v-model="checked" @click="setTheme" />
    </div>
    <div>
      <!-- <button @click="tui">退出登录</button> -->
      <!-- <div class=" light" @click="setTheme('light')">浅</div>
      <div class=" dark" @click="setTheme('dark')">深</div> -->
    </div>
  </div>
</template>
   
<script>
import { indexmain } from "@/api/index"
import { Switch } from 'vant';
export default {
  name: "mins",
  data() {
    return {
      src: "https://yanxuan.nosdn.127.net/80841d741d7fa3073e0ae27bf487339f.jpg?imageView&quality=90&thumbnail=64x64",
      list: "list",
      itemname: [{ icon: "credit-pay", name: "待付款" }, { icon: "idcard", name: "待发货" }, { icon: "logistics", name: "待收货" }, { icon: "shield-o", name: "已完成" }],
      youname: [{ icon: "vip-card-o", name: "带使用" }, { icon: "coupon-o", name: "已使用" }, { icon: "gift-card-o", name: "过期关闭" }],
      checked: false,
      idocu: "",
      show: false
    }
  },
  mounted() {
    
    indexmain().then(res => {
      this.idocu = res.data.data.order.unpaid
      if (res.data.data.order.unpaid > 0) {
        this.show = true
      }
    })
    if (localStorage.getItem("checked") == "false") {
      window.document.documentElement.setAttribute("data-theme", 'light')
      this.checked = false
    } else if (localStorage.getItem("checked") == "true") {
      window.document.documentElement.setAttribute("data-theme", 'dark')
      this.checked = true

    }
  },

  methods: {
    sgou(){
      this.$router.push({ path: '/setorder' })

    },
    nikename(id){
      console.log(id)
      this.$router.push({ path: "/nikename"})
      localStorage.setItem("nikename",id)
    },
    tack(index) {
      console.log(index)
      this.$router.push({
        path: '/take',
        query: {
          id: index
        }
      })
      localStorage.setItem("indexid", index+1)
    },
    install() {
      this.$router.push({ path: "/mainset" })
    },
    setTheme() {
      localStorage.setItem("checked", !this.checked)
      if (this.checked == true) {
        window.document.documentElement.setAttribute("data-theme", 'light')
      } else if (this.checked == false) {
        window.document.documentElement.setAttribute("data-theme", 'dark')
      }
    },
    tui() {
      localStorage.removeItem("token")
      localStorage.removeItem("userInfo")
      window.location.reload();
    }
  }
}
</script>

<style lang="scss" scoped>
.deler {
  display: flex;
  // flex-direction: row;
  justify-content: space-between;
  // align-items: center;
  background-color: white;
  height: 65px;
  padding: 10px;

  div {
    width: 25%;
    text-align: center;

    p {
      margin: 0;
      padding: 5px;
    }
  }
}

.van {
  margin-top: 10px;
}

.mian-top {
  height: 130px;
  width: 100%;
  background: url("http://vvweb.gitee.io/qyg-front/static/img/user_head_bg.38dfa566.png") no-repeat;
  background-size: cover;
}

.main-center {
  height: 100vh;
  background-color: #f2f2f2;
}</style>